<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>圈子</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<script src="../js/mui.min.js"></script>
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/iconfont.css">
		<style>
			.topic_li{
				max-height:150px;
				padding: 8px;
				/* border:1px solid #eec; */
				box-shadow:-4px -1px 10px 1px #bfe4bf inset;/*水平阴影 垂直阴影 模糊距离 阴影大小 阴影颜色 内部阴影*/
				margin-bottom: 30px;
			}
			.title{
				padding:0 15px;
				font-family: "Microsoft Yahei";//微软雅黑
				font-size: 20px;
				overflow:hidden;
				text-overflow:ellipsis;
				display:-webkit-box;
				-webkit-box-orient:vertical;
				-webkit-line-clamp:1;
			}
			.content{
				font-family: "STXihei";//华文细黑
				font-size: 18px;
				overflow:hidden;
				text-overflow:ellipsis;
				display:-webkit-box;
				-webkit-box-orient:vertical;
				-webkit-line-clamp:3; 
			}
			.right{
				position:relative;
				left:150px;
			}
			.icon-dianzan{
				color:#09a267;
			}
			.icon-redu{
				color:red;
			}
		</style>
	</head>
	<body>
		<div class="mui-navbar-inner mui-bar mui-bar-nav" style="background: linear-gradient(#9191ea,#fff);">
			<h1 class="mui-title"><span class="mui-icon mui-icon-pengyouquan"></span>圈子</h1>
		</div>
		<div class="mui-content" id="content_area" style="padding-left:10px;padding-right:10px;"/>
			<div class="content-area">
				<div class="mui-card">
					<ul class="mui-table-view" id="topic_list">
					</ul>
				</div>
			</div>
		</div>
	</body>
	<script src="../jquery.mobile-1.4.5/jquery-1.8.3.min.js"></script>
	<script src="../js/ajax.js"></script>
	<script src="../js/conf.js"></script>
	<script src="../js/circle.js"></script>
	<script>
		$(function(){
			mui.init({
				preloadPages:[{
					id:'circle_detail',
					url:'./circle_detail.html'
				}]
			});
			mui.plusReady(function() {
				var cdetailPage = null;
				mui('#topic_list').on('tap',".topic_li",function(e) {
					var id = this.getAttribute('id');
					var userId = this.getAttribute('userId');
					if(!cdetailPage){
						cdetailPage = plus.webview.getWebviewById('circle_detail');
					}
					//触发商品详情页面的pdetailId事件
					mui.fire(cdetailPage,'cdetailId',{
						postId:id,
						userId:userId
					});
					mui.openWindow({
						id:"circle_detail"
					});
				});
			});
		});
	</script>
</html>
